<template>
  <div class="swiper-main">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <img :src="item.imgUrl" alt="" />
      </swiper-slide>
    </swiper>
    <!-- 小圆点 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "Swiper",
  props: {
    swiperList:Array
  },
  data() {
    return {
      swiperOption: {
        autoplay: 3000,
        speed: 1000,
        pagination: {
          el: ".swiper-pagination",
        },
      },
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
};
</script>

<style scoped>
.swiper-main {
  position: relative;
  width: 100%;
  height: 160px;
}
.swiper-container {
  width: 100%;
  height: 160px;
}
.swiper-main img {
  width: 100%;
  height: 160px;
}
.swiper-pagination {
  position: absolute;
  width: 100%;
  bottom: 5px;
}
::v-deep .swiper-pagination-bullet-active {
  background-color: #cc0e0e;
}
::v-deep .swiper-pagination-bullet {
  margin: 0 3px;
}
</style>
